<!DOCTYPE html>
<html>
  <head>
    <title>Shenyang Expat Taxi Book & Map</title>
    <link href="./stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
  </head>
<body onload="getLocation()">

<!-- ++Begin Variable Passing Code from http://www.netlobo.com/url_query_string_javascript.html ++ -->

<script type="text/javascript">
//<![CDATA

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];

}
//]]>

</script>

<!-- ++Begin small script to set param_wsId ++ -->
<script type="text/javascript">
//<![CDATA

// alert(gup( 'param_wsId' ));

var param_wsId = gup( 'param_wsId' );

if (param_wsId != "")
  {
  // alert(param_wsId);
  // added snippet of script from http://stackoverflow.com/a/18759412/101739
  // alert(parseInt((param_wsId^31578)).toString(36));
  param_wsId = parseInt((param_wsId^31578)).toString(36);
  }
  else
  {
  // param_wsId = "od6"
  param_wsId = "32"
  // alert(param_wsId);
  param_wsId = parseInt((param_wsId^31578)).toString(36);
  }

//]]>
</script>


<h1 align="center">Shenyang Expat Taxi Book & Map</h1>

<h2 align="center">
  | <a href="map.html?param_wsId=32">Map View</a> | 
  <a href="book.html?param_wsId=Published">Book View</a> | 
  <a href="https://docs.google.com/forms/d/17POHdLC8DDOUfVrEXh5MsyWWBk9MG3BavzNkcRV55rc/viewform" target="_blank">Submit Location</a> | 
</h2>

<h3 align="center">
<a href="map.html?param_wsId=32">All Locations</a> | 
<a href="map.html?param_wsId=13">Hotels</a> | 
<a href="map.html?param_wsId=15">General Information</a> | 
<a href="map.html?param_wsId=16">Groceries</a> | 
<a href="map.html?param_wsId=17">Shopping</a> | 
<a href="map.html?param_wsId=18">Entertainment</a> | 
<a href="map.html?param_wsId=19">Sightseeing & Parks</a>
</h3>

<h3 align="center">

<select onchange="if (this.value) window.location.href=this.value">
    <option value="" selected>Locations by District / County</option>
    <option value="">Shenhe</option>
    <option value="map.html?param_wsId=20">Heping</option>
    <option value="map.html?param_wsId=21">Dadong</option>
    <option value="">Huanggu</option>
    <option value="map.html?param_wsId=23">Tiexi</option>
    <option value="">Sujiatun</option>
    <option value="">Dongling</option>
    <option value="map.html?param_wsId=22">Shenbei</option>
    <option value="">Yuhong</option>
    <option value="">Xinmin</option>
    <option value="">Liaozhong</option>
    <option value="">Kangping</option>
    <option value="">Faku</option>
</select>
 | 
<a href="map.html?param_wsId=0">All Restaurants & Bars</a> : 

<select onchange="if (this.value) window.location.href=this.value">
    <option value="" selected>Restaurants by Services</option>
    <option value="">Delivery</option>
    <option value="">Take-out</option>
    <option value="">Catering</option>
    <option value="">Beer selection</option>
    <option value="">Wine selection</option>
    <option value="">Cocktails</option>
</select>    
<select onchange="if (this.value) window.location.href=this.value">
    <option value="" selected>Restaurants by Cuisine</option>
    <option value="map.html?param_wsId=27">Chinese</option>
    <option value="map.html?param_wsId=26">Western</option>
    <option value="">Japanese</option>
    <option value="">Korean</option>
    <option value="map.html?param_wsId=28">Coffee / Tea</option>    
    <option value="">Fast-food</option>
</select>

</h3>

<!-- ++Begin GSpreadsheets Map Wizard Generated Code++ -->

<div align="center">

   
<div style="width:575px; font-family:Arial, 
sans-serif; font-size:11px; border:1px solid black">
  <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">

    <td> <div id="cm_map" style="width:450px; height:450px"></div> </td>
  </tr> </tbody></table>
</div>

   <br clear="all">

   <button onclick="getLocation()">Get Current Location</button>
   <br clear="all" />
   
    <p id="info"></p>

    <div id="content"></div>

</div>
      
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyBriE3cgv5LHjYyO80qQ_TFmP8oKk85FTg" 
  type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
// var param_wsId = "od6";
var param_wsId = param_wsId
var param_ssKey = "0Arrv16mpemDHdFhMbHdFODlxdU8yMVI0UVBRNFk1WEE";
var param_useSidebar = true;
var param_titleColumn = "name";
var param_descriptionColumn = "description";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "";
var param_iconType = "green";
var param_iconOverType = "orange";

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GLargeMapControl());
    cm_map.addControl(new GMapTypeControl());
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
    cm_getJSON();
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  } 
}

/**
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}

/** 
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var usingRank = false;

  if(param_useSidebar == true) {
    var sidebarTD = document.createElement("td");
    sidebarTD.setAttribute("width","150");
    sidebarTD.setAttribute("valign","top");
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.overflow = "auto";
    sidebarDIV.style.height = "450px";
    sidebarDIV.style.fontSize = "11px";
    sidebarDIV.style.color = "#000000";
    sidebarTD.appendChild(sidebarDIV);
    document.getElementById("cm_mapTR").appendChild(sidebarTD);
  }

  var bounds = new GLatLngBounds();	  

  if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    json.feed.entry.sort(cm_sortRows);
  }

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
              + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        // html += "<br/>" + entry["gsx$"+param_descriptionColumn].$t;
        html += "<br/>" + "<a href=\"http://maps.google.com/maps?saddr=&daddr=" + lat + "," + lng + "&output=classic\">Directions</a> " + entry["gsx$"+param_descriptionColumn].$t;
      }
      html += "</div>";

      // create the marker
      var marker = cm_createMarker(point,label,html,rank);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      bounds.extend(point);
	  
      if(param_useSidebar == true) {
        var markerA = document.createElement("a");
        markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
        markerA.style.color = "#000000";
        var sidebarText= "";
        if(usingRank) {
          sidebarText += rank + ") ";
        } 
        sidebarText += label;
        markerA.appendChild(document.createTextNode(sidebarText));
        sidebarDIV.appendChild(markerA);
        sidebarDIV.appendChild(document.createElement("br"));
        sidebarDIV.appendChild(document.createElement("br"));
      } 
    }
  }

  // cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
  // cm_map.setCenter(bounds.getCenter());
}

/**
 * Creates marker with ranked Icon or blank icon,
 * depending if rank is defined. Assigns onclick function.
 * @param {GLatLng} point Point to create marker at
 * @param {String} title Tooltip title to display for marker
 * @param {String} html HTML to display in InfoWindow
 * @param {Number} rank Number rank of marker, used in creating icon
 * @return {GMarker} Marker created
 */
function cm_createMarker(point, title, html, rank) {
  var markerOpts = {};
  var nIcon = new GIcon(cm_baseIcon);

  if(rank > 0 && rank < 100) {
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/marker" + rank + ".png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/marker" + rank + ".png";
    nIcon.image = nIcon.imageOut; 
  } else { 
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/blank.png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/blank.png";
    nIcon.image = nIcon.imageOut;
  }

  markerOpts.icon = nIcon;
  markerOpts.title = title;		 
  var marker = new GMarker(point, markerOpts);
	
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  GEvent.addListener(marker, "mouseover", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  GEvent.addListener(marker, "infowindowopen", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  return marker;
}

/**
 * Creates a script tag in the page that loads in the 
 * JSON feed for the specified key/ID. 
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_getJSON() {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

setTimeout('cm_load()', 500); 

// begin code from w3school for obtaining current location using html5
// http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation

var x=document.getElementById("info");

function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;	
  // alert(position.coords.latitude);
  // alert(position.coords.longitude);
  cm_map.setCenter(new GLatLng( position.coords.latitude, position.coords.longitude ), 15);
  }

//]]>

</script>

</body>
</html>
